<script setup>
import {useRouter} from 'vue-router';
import {IconNotification, IconSettings, IconFullscreen, IconUser, IconComputer,IconStarFill} from '@arco-design/web-vue/es/icon';
import {useUserStore} from "@/stores/user";
import {useTabStore} from '@/stores/tab'
import {computed} from "vue";


const router = useRouter()
const userStore = useUserStore()
const tabStore = useTabStore()

defineProps({
  menuItems: Array,
  isVertical: Boolean
});

const navigate = (path, menuItem) => {
  router.push(path)
};

const handleOut = () => {
  console.log('退出登录')
  userStore.logout()
}

const handleTabClick = (key) => {
  tabStore.activeTab = key
  router.push(key)
}

const handleNavClick = (id) => {
  console.log('handleNavClick', id)
  userStore.toggleNav(id)
}

const tenantName = computed(() => {
  return userStore.tenantName
})

</script>

<template>
  <a-layout-header class="app-header">
    <!-- 左侧容器 -->
    <div class="left-container">
      <a-link href="/dashboard">
        <template #icon>
          <IconComputer/>
        </template>
        {{tenantName}}
      </a-link>
      <!-- 新增选项卡区域 -->
      <a-space  >
        <template v-for="nav in userStore.navItems" :key="nav.id" >
          <a-button style="min-width: 160px !important;"  type="primary" :status="userStore.activeNav === nav.id ?'success' : 'primary'"
                    @click="handleNavClick(nav.id)" size="large"  >
            {{nav.menuName}}
          </a-button>
        </template>
      </a-space>
<!--      <div class="tabs-container">-->
<!--        <a-tag v-for="tab in tabStore.tabs" :key="tab.key" :checkable="true"-->
<!--               :closable="true" :color="tab.key === tabStore.activeTab ? '#f53f3f' : 'arcoblue'" bordered size="large"-->
<!--               @check="handleTabClick(tab.key)" @close="tabStore.closeTab(tab.key)">-->
<!--          <template #icon>-->
<!--            <icon-star/>-->
<!--          </template>-->
<!--          {{ tab.title }}-->
<!--        </a-tag>-->
<!--      </div>-->
    </div>
    <!-- 右侧控制工具栏 -->
    <div class="control-tools">
      <a-tooltip content="全屏">
        <a-button shape="circle" type="text">
          <template #icon>
            <IconFullscreen/>
          </template>
        </a-button>
      </a-tooltip>

      <a-tooltip content="消息通知">
        <a-badge :count="5" dot>
          <a-button shape="circle" type="text">
            <template #icon>
              <IconNotification/>
            </template>
          </a-button>
        </a-badge>
      </a-tooltip>

      <a-dropdown position="br">
        <a-button shape="circle" type="text">
          <template #icon>
            <IconSettings class="text-white"/>
          </template>
        </a-button>
        <template #content>
          <a-doption>
            <IconLanguage/>
            语言设置
          </a-doption>
          <a-doption>系统设置</a-doption>
        </template>
      </a-dropdown>

      <a-dropdown trigger="hover">
        <a-avatar :style="{ backgroundColor: '#3370ff' }">
          <IconUser/>
        </a-avatar>
        <template #content>
          <a-doption @click="navigate('/profile')">个人中心</a-doption>
          <a-doption @click="handleOut('logout')">退出登录</a-doption>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<style scoped>
.app-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);

  .arco-icon {
    font-size: 28px;
  }

  .left-container {
    display: flex;
    align-items: center;
    gap: 16px;
  }


  .control-tools {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* 保持原有的hover样式 */

  .control-tools :deep(.arco-btn-text):hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .tabs-container {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
  }

}


</style>